import React, { PropTypes, PureComponent } from 'react';
import { connect } from 'dva';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import { Form, Icon as LegacyIcon } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Tabs, message } from 'antd';
import { FirstHeaderC, DATA_ENTRY, InfoTipsC, TableC } from '../../../../comps';
import arrow from '../../../../assets/busi/PortfolioManagement/portfolioTrackings/arrow.png';
import changePng from '../../../../assets/busi/PortfolioManagement/portfolioTrackings/change.png';
import uuid from 'es6-uuid';
import ReactDOM from 'react-dom';
import style from '../index.less';
import config from '../../../../comps/business/tradingMarket/config';
import { fixedNum } from '../../../../utils/utils';
import { isZiGuanEvir } from '../../../../utils/commonFunc';

const { TabPane } = Tabs;
@Form.create()
class TargetTable extends React.Component {
  // props默认值
  static defaultProps = {
    useDataSource: [], // 产品组下拉数据
    selectId: [], // 产品组选择的产品code
    isgroup: false, // 是否为产品组
    activeKey: undefined, // 当前活动页
    indexKey: undefined, // tab页码
    assetTypes: [], // 资产类型
    industry: [], // 所属行业
    switchValue: false,
    heightOrigin: undefined,
    heightTable: 0, // 表格位置
  };

  state = {
    columns: [],
    dataSource: [], // 表格数据
    seeRowId: [], // 可是行id
    expandRow: [], // 展开的行id
    selectId: [], // 树形框选择后的id（包括父级）
    targetArr: [], // 指标
    indexKey: '',
    sortedInfo: {}, // 排序信息
    useData: {}, // 接口参数，用于定时刷新
  };

  componentDidMount() {
    // 父组件对本组件的引用
    this.props.onRef(this);
    // 获取表头
    this.props.dispatch({
      type: 'portfolioTrackingsM/getColumn',
      payload: {
        isSimulate: this.props.isSimulate, /// /是否为模拟组合
      },
      callback: (res) => {
        this.setState({
          columns: res.columns,
        });
      },
    });
    if (this.props.isgroup) {
      if (this.props.selectId) {
        this.setState(
          {
            selectId: this.props.selectId,
          },
          () => {
            this.getGroupInfo();
          },
        );
      }
    } else {
      this.getProductInfo();
      this.getTargetInfo();
      this.getIncomeTable();
    }
    this.windowChange();
    this.setState({
      indexKey: this.props.indexKey,
    });
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.isgroup) {
      if (this.state.selectId != nextProps.selectId) {
        this.setState(
          {
            selectId: nextProps.selectId,
          },
          () => {
            this.getGroupInfo();
          },
        );
      }
    } else if (this.props.assetTypes != nextProps.assetTypes || this.props.industry != nextProps.industry) {
      this.getProductInfo();
      this.getTargetInfo();
      this.getIncomeTable();
    }
  }

  componentWillUnmount() {
    this.timer && clearInterval(this.timer);
    this.timer = null;
    clearInterval(this.tableTimer);
    this.tableTimer = null;
    this.setState = (_state, _callback) => {};
  }

  // 获取组件位置
  windowChange = () => {
    setTimeout(() => {
      try {
        // 获取组件当前位置,确定区间收益率按钮位置
        const domTop = ReactDOM.findDOMNode(this).getBoundingClientRect();
        const height = this.props.isgroup ? domTop.top + 170 : domTop.top + 280;
        this.setState({
          heightTable: height,
        });
      } catch (err) {
        this.setState({
          heightTable: 0,
        });
      }
    }, 0);
  };

  refresh = () => {
    if (this.props.isgroup) {
      this.getGroupInfo();
    } else {
      this.getProductInfo();
      this.getTargetInfo();
      this.getIncomeTable();
    }
  };

  clearTime = () => {
    clearInterval(this.timer);
    this.timer = null;
    clearInterval(this.tableTimer);
    this.tableTimer = null;
  };

  // 产品组查询时时回调
  getGroupInfo = () => {
    const { useDataSource, selectId } = this.props;
    this.setState({ expandRow: [] });
    const arrs = [];
    useDataSource.map((item) => {
      selectId.map((item1) => {
        if (item.sortId == item1) {
          arrs.push({
            portfolioName: item.portfolioName,
            id: item.id,
            groupId: item.id,
            sortId: item.sortId,
            portfolioCode: item.portfolioCode,
            product: item.product || false,
            children: item.children && item.children.length ? this.getChildren(selectId, item.children) : null,
          });
        }
      });
    });
    this.setState(
      {
        dataSource: arrs,
      },
      () => {
        const { dataSource } = this.state;
        const data = [];
        dataSource.map((item) => {
          data.push({ id: item.portfolioCode, isChildren: item.product, pid: '', sortId: item.sortId, groupId: item.groupId });
        });
        this.setState(
          {
            seeRowId: data,
          },
          () => {
            this.goToInfo();
          },
        );
      },
    );
  };

  // 产品组选完后过滤未选择的数据
  getChildren = (arr1, arr2) => {
    const datas = [];
    arr1.map((item) => {
      arr2.map((items) => {
        if (item == items.sortId) {
          datas.push(items);
        }
      });
    });
    return datas;
  };

  // 产品查询
  getProductInfo = () => {
    const { useDataSource } = this.props;

    // // 产品查询设置默认展开;
    // if (useDataSource[0].children && useDataSource[0].children.length > 0) {
    //   // console.log('useDataSource22', useDataSource);
    //   const arr = [useDataSource[0].sortId];
    //   // console.log('arr', arr);
    //   useDataSource[0].children.map((item) => {
    //     arr.push(item.sortId);
    //   });
    //   this.setState({
    //     expandRow: arr,
    //   });
    // } else {
    //   this.setState({
    //     expandRow: [useDataSource[0].sortId],
    //   });
    // }
    const arrs = [];
    useDataSource.map((item) => {
      arrs.push({
        portfolioName: item.portfolioName,
        id: item.portfolioCode,
        sortId: item.sortId,
        product: item.product,
        portfolioCode: item.portfolioCode,
        children: item.children && item.children.length ? item.children : [],
        child: item.child && item.child.length ? item.child : [],
      });
    });
    this.setState(
      {
        dataSource: arrs,
      },
      () => {
        const data = [];
        let iaArr = [];
        arrs.map((item) => {
          data.push({ id: item.portfolioCode, isChildren: true, sortId: item.sortId, pid: '' });
          iaArr = this.getId(item.portfolioCode, item.children); // 默认展开行下层子元素id
          let itemArr = [];
          if (item.children && item.children.length) {
            item.children.map((_items) => {
              itemArr = itemArr.concat(itemArr);
            });
            iaArr = iaArr.concat(itemArr);
          }
        });
        // 产品查询默认展开第一层;
        const seeRow = data.concat(iaArr);
        this.setState(
          {
            seeRowId: seeRow,
          },
          () => {
            this.goToInfo();
          },
        );
      },
    );
  };

  // 查询按钮事件
  goToInfo = () => {
    this.compareDatas = [];
    const { seeRowId, expandRow, dataSource, showTable } = this.state;
    const { dispatch, assetTypes, industry, isSimulate, isgroup } = this.props;
    let useData;
    // 产品组
    if (isgroup) {
      const compareId = this.compareData(dataSource); // 获取表格数据中叶子节点的id
      const groupId = this.changeUseData(seeRowId, expandRow, compareId);
      useData = {
        groupId,
        assetTypes, // 资产类型
        industry, // 所属行业
        isSimulate,
      };
    } else {
      useData = {
        productId: seeRowId,
        assetTypes, // 资产类型
        industry, // 所属行业
        isSimulate,
      };
    }

    dispatch({
      type: 'portfolioTrackingsM/getRowInfo',
      payload: useData,
      callback: (res) => {
        if (res && res.length) {
          if (this.addColumns(res)) {
            const newColumns = [...this.state.columns];
            const hasbaseWeight = newColumns.filter((item) => item.dataIndex == 'baseWeightdiff');
            if (hasbaseWeight && hasbaseWeight.length == 0) {
              newColumns.splice(11, 0, {
                dataIndex: 'baseWeightdiff',
                title: '与基准权重差（%）',
                key: 'baseWeightdiff',
              });
              this.setState({
                columns: newColumns,
              });
            }
          }
        }
        this.addTableData(this.state.dataSource, res);
        this.setState(
          {
            useData,
          },
          () => {
            this.timeRefresh();
          },
        );
      },
    });
  };

  // 修改columns
  addColumns = (res) => {
    let ischangeColumns = false;
    res.map((items) => {
      if (!ischangeColumns) {
        if (items.baseWeightdiff != null && items.baseWeightdiff != undefined) {
          ischangeColumns = true;
        } else if (items.children && items.children.length) {
          ischangeColumns = this.addColumns(items.children);
        }
      }
    });
    return ischangeColumns;
  };

  // 定时刷新
  timeRefresh = () => {
    const { dataSource, showTable, useData } = this.state;
    const { dispatch, switchValue, isSimulate, isgroup } = this.props;
    if (switchValue) {
      if (this.timer) clearInterval(this.timer);
      this.timer = null;
      this.timer = setInterval(() => {
        dispatch({
          type: 'portfolioTrackingsM/getRowInfo',
          payload: useData,
          callback: (res) => {
            this.addTableData(dataSource, res);
          },
        });
        if (!isgroup) {
          this.getTargetInfo();
        }
      }, 10000);
    }
  };

  // 获取表格数据中product为true（是否为最底层--产品）的id
  compareData = (e) => {
    e.map((item) => {
      if (item.product) {
        this.compareDatas.push(item.sortId);
      }
      item.children && item.children.length ? this.compareData(item.children) : null;
    });
    return this.compareDatas;
  };

  // 整理发给接口的数据
  changeUseData = (seeRowId, expandRow, compareId) => {
    const data = seeRowId;
    data.map((item1) => {
      item1.isChildren = false;
      expandRow.map((item2) => {
        compareId.map((item3) => {
          if (item1.sortId == item2) {
            if (item1.sortId == item3) {
              item1.isChildren = true;
            }
          }
        });
      });
    });
    return data;
  };

  // 拼接表格数据
  addTableData = (arr1, arr2) => {
    const arr = this.setTableData(arr1, arr2);
    this.setState({
      dataSource: arr,
      expandRow: [arr[0].sortId], // 发完请求获取到子数据之后再设置一回expandRow
    });
  };

  // 递归-拼接表格数据
  setTableData = (arr1, arr2) => {
    const newDataSource = arr1;
    const { isgroup } = this.props;
    if (isgroup) {
      if (arr1 && arr1.length && arr2 && arr2.length) {
        newDataSource.map((item) => {
          arr2.map((items) => {
            if (item.sortId == items.sortId) {
              item.totalValue = items.totalValue;
              item.weight = items.weight;
              item.totalPnl = items.totalPnl;
              item.todayPnl = items.todayPnl;
              item.costPrice = items.costPrice;
              item.return = items.return;
              item.newPrice = items.newPrice;
              item.quantity = items.quantity;
              item.industry = items.industry;
              if (item.product) {
                if (items.children !== null) {
                  item.children = this.addChildId(items.children);
                } else {
                  item.children = [];
                }
              }
            } else if (!item.product) {
              this.setTableData(item.children, arr2);
            }
          });
        });
      }
    } else if (arr1 && arr1.length && arr2 && arr2.length) {
      newDataSource.map((item) => {
        arr2.map((items) => {
          if (item.sortId == items.sortId) {
            item.totalValue = items.totalValue;
            item.weight = items.weight;
            item.totalPnl = items.totalPnl;
            item.todayPnl = items.todayPnl;
            item.weightdiff = items.weightdiff;
            item.costPrice = items.costPrice;
            item.return = items.return;
            item.newPrice = items.newPrice;
            item.quantity = items.quantity;
            item.industry = items.industry;
            // 是否已添加个券
            if (item.child && item.child.length > 0) {
              if (items.children !== null) {
                item.children = this.addChildId(items.children);
                item.children = item.children.concat(item.child);
              } else {
                item.children = item.child;
              }
            } else if (items.children !== null) {
              item.children = this.addChildId(items.children);
            } else {
              item.children = [];
            }
          } else {
            this.setTableData(item.children, arr2);
          }
        });
      });
    }
    return newDataSource;
  };

  // 接口返回数据children添加唯一标识id
  addChildId = (arr) => {
    const data = arr;
    if (data && data.length) {
      data.map((item) => {
        item.sortId = uuid(32);
      });
    }
    return data;
  };

  // 渲染表格
  tableRender = () => {
    const { dataSource, columns, expandRow } = this.state;
    const newColumns = this.changeColumns(columns);
    return (
      // 组合跟踪主界面下方表格
      <div style={{ marginTop: '10px' }}>
        <TableC
          columns={newColumns}
          dataSource={dataSource}
          widthKey='120px'
          rowKey='sortId'
          scroll={{ x: this.props.isSimulate ? 1500 : 2000 }}
          selfScrollY={true}
          hidePage={true}
          expandedRowKeys={expandRow} // 展开的行
          // defaultExpandedRowKeys={this.state.expandRow} // 默认展开的行
          rowExpandable={() => true}
          onChange={this.handleTableChange}
          onExpand={(expanded, record) => this.onExpandChange(expanded, record)} // 点击行展开事件
        />
      </div>
    );
  };

  // 表格排序改变调用
  handleTableChange = (_pagination, _filter, sorter) => {
    this.setState({
      sortedInfo: sorter,
    });
  };

  // 改变columns属性
  changeColumns = (columns) => {
    const arr = columns;
    let { sortedInfo } = this.state;
    sortedInfo = sortedInfo || {};
    arr.map((item) => {
      if (item.key == 'totalValue' || item.key == 'weight' || item.key == 'quantity' || item.key == 'baseWeightdiff') {
        // 总市值、weight、持仓数量
        item.align = 'right';
        item.render = (text) => {
          return text !== null && text !== undefined ? fixedNum(text, 2) : '';
        };
      }
      if (item.key == 'costPrice' || item.key == 'newPrice') {
        // 成本价、最新价
        item.width = '100px';
        item.align = 'right';
        item.render = (text) => {
          return text !== null && text !== undefined ? fixedNum(text, 2) : '';
        };
      }
      if (item.key == 'totalPnl' || item.key == 'weightdiff' || item.key == 'todayPnl') {
        // 当日盈亏、总盈亏、对比产品权重差
        item.type = 'updownText';
        item.noData = '';
      }
      if (item.key == 'return') {
        // 涨跌幅
        item.type = 'columnView';
        item.percent = true;
        item.width = '11%';
      }
      if (item.key == 'return' || item.key == 'totalPnl' || item.key == 'todayPnl' || item.key == 'totalValue' || item.key == 'weight' || item.key == 'weightdiff') {
        // 涨跌幅、当如盈亏，总盈亏、总市值、权重、对比产品权重差
        item.sorter = (a, b) => a[item.key] - b[item.key];
        item.sortOrder = sortedInfo.columnKey === item.key && sortedInfo.order;
      }
      if (item.key == 'assetType') {
        // 资产类别
        item.sorter = (a, b) => (isZiGuanEvir() ? a[item.key].localeCompare(b[item.key]) : a[item.key].length - b[item.key].length);
        item.sortOrder = sortedInfo.columnKey === item.key && sortedInfo.order;
      }
      if (item.key == 'portfolioName' || item.key == 'assetType' || item.key == 'stockCode' || item.key == 'stockName' || item.key == 'industry') {
        item.render = (text) => {
          return text !== null && text !== undefined ? text : '';
        };
      }
      if (item.key == 'exchangecode') {
        // 交易市场
        item.width = '100px';
        item.render = (text, _record) => {
          const value = config.filter((item) => {
            return item.value == text;
          });
          if (value && value.length > 0) {
            return value[0].title;
          } else {
            return '';
          }
        };
      }
      if (item.key == 'assetType' || item.key == 'stockCode' || item.key == 'weight') {
        item.width = '110px';
      }
      // '交易属性
      if (item.key == 'TRDATTR') {
        item.width = '110px';
        const arr = [
          { value: 'B', title: '多头' },
          { value: 'PT', title: '普通' },
          { value: 'S', title: '空头' },
          { value: 'XY', title: '信用' },
          { value: 'ZRT', title: '转融通' },
          { value: 'ZS', title: '指数' },
        ];
        item.render = (text, _record) => {
          const value = arr.filter((item) => {
            return item.value == text;
          });
          if (value && value.length > 0) {
            return value[0].title;
          } else {
            return '--';
          }
        };
      }
      // '持仓类型
      if (item.key == 'POSTYPE') {
        item.width = '110px';
        const arr = [
          { value: 'FEE', title: '应付费用' },
          { value: 'QSK', title: '清算款' },
          { value: 'QT', title: '其他' },
          { value: 'XJFZ', title: '现金负债' },
          { value: 'XJZC', title: '现金资产' },
          { value: 'YFK', title: '应付款' },
          { value: 'YFLR', title: '应付利润' },
          { value: 'YFLX', title: '应付利息' },
          { value: 'YFWFLX', title: '应收红利' },
          { value: 'YSK', title: '应收款' },
          { value: 'YSLX', title: '应收利息' },
          { value: 'YSWSLX', title: '应收未收利息' },
          { value: 'ZQFZ', title: '证券负债' },
          { value: 'ZQZC', title: '证券资产' },
        ];
        item.render = (text, _record) => {
          const value = arr.filter((item) => {
            return item.value == text;
          });
          if (value && value.length > 0) {
            return value[0].title;
          } else {
            return '--';
          }
        };
      }
    });
    return arr;
  };

  // 改变columns属性
  changeincomeColumn = (columns = []) => {
    const arr = columns;
    arr.map((item) => {
      if (item.key == 'bias') {
        item.type = 'updownText';
        item.align = 'right';
        item.percent = true;
      } else if (item.key == 'item') {
        item.align = 'left';
      } else {
        item.align = 'right';
        item.render = (text) => {
          return text !== null && text !== undefined ? `${fixedNum(Number(text) * 100, 2)}%` : '--';
        };
      }
    });
    return arr;
  };

  // 获取指标数据
  getTargetInfo = () => {
    const { dispatch, useDataSource, isSimulate } = this.props;
    dispatch({
      type: 'portfolioTrackingsM/getTargetInfo',
      payload: {
        productId: useDataSource[0].portfolioCode,
        isSimulate,
      },
      callback: (res) => {
        let targetArr = [];
        if (isSimulate == 1) {
          // 模拟组合
          targetArr = [
            {
              key: 'changes',
              title: '涨跌幅',
              value: res.changes == 0 || res.changes ? res.changes : '--',
            },
            {
              key: 'datumChange',
              title: '基准涨跌幅',
              value: res.datumChange == 0 || res.datumChange ? res.datumChange : '--',
            },
            {
              key: 'resistChange',
              title: '相对基准涨跌幅',
              value: res.resistChange == 0 || res.resistChange ? res.resistChange : '--',
            },
          ];
        } else {
          targetArr = [
            {
              key: 'realtimeValue',
              title: '实时单位净值',
              value: res.realtimeValue == 0 || res.realtimeValue ? res.realtimeValue.toFixed(4) : '--',
            },
            {
              key: 'newValue',
              title: `最新单位净值(${res.newData ? res.newData : '--'})`,
              value: res.newValue == 0 || res.newValue ? res.newValue : '--',
            },
            {
              key: 'changes',
              title: '涨跌幅',
              value: res.changes == 0 || res.changes ? res.changes : '--',
            },
            {
              key: 'datumChange',
              title: '基准涨跌幅',
              value: res.datumChange == 0 || res.datumChange ? res.datumChange : '--',
            },
            {
              key: 'resistChange',
              title: '相对基准涨跌幅',
              value: res.resistChange == 0 || res.resistChange ? res.resistChange : '--',
            },
          ];
        }

        this.setState({
          targetArr,
        });
      },
    });
  };

  // 获取区间收益率
  getIncomeTable = () => {
    const { dispatch, useDataSource, isSimulate } = this.props;
    if (isSimulate == '1') return;
    dispatch({
      type: 'portfolioTrackingsM/getIncomeTable',
      payload: {
        productId: useDataSource[0].portfolioCode,
        isSimulate,
      },
      callback: (res) => {
        this.setState({
          incomeColumn: res.columns,
          incomeDataSource: res.dataSource,
        });
      },
    });
  };

  // 区间收益率按钮
  fixedBtn = () => {
    const right = isZiGuanEvir() ? 0 : '14px';
    const top = `${this.props.heightOrigin + 120}px`;
    return (
      <div className={style.fixedBtn} onClick={this.changeFixed} style={{ right: this.state.showTable ? '-140px' : right, top }}>
        <div className={style.drawerTitle}>
          <span>区间收益率</span>
          <img src={arrow} className={style.drawerImg} />
        </div>
      </div>
    );
  };

  // 区间收益率表格
  fixedTable = () => {
    const { incomeColumn, incomeDataSource } = this.state;
    const newColumns = this.changeincomeColumn(incomeColumn);
    const right = isZiGuanEvir() ? 0 : '14px';
    const top = `${this.props.heightOrigin}px`;
    return (
      <div className={style.drawerRender} style={{ right: this.state.showTable ? right : '-400px', top }}>
        <div className={style.drawerTitle}>
          <span>区间收益率</span>
          <img src={arrow} className={style.drawerImg} onClick={this.changeFixed} />
        </div>
        <div>
          <TableC columns={newColumns} dataSource={incomeDataSource} rowKey='item' hidePage={true} />
        </div>
      </div>
    );
  };

  // 区间收益率表格切换
  changeFixed = (refreshBtn) => {
    this.setState(
      {
        showTable: refreshBtn == 'click' ? false : !this.state.showTable,
      },
      () => {
        if (this.state.showTable && this.props.switchValue) {
          if (this.tableTimer) clearInterval(this.tableTimer);
          this.tableTimer = null;
          this.tableTimer = setInterval(() => {
            this.getIncomeTable();
          }, 10000);
        } else {
          clearInterval(this.tableTimer);
          this.tableTimer = null;
        }
      },
    );
  };

  // 展开闭合行操作
  onExpandChange = (expanded, record) => {
    const { seeRowId } = this.state;
    const rowdata = JSON.parse(JSON.stringify(this.state.expandRow));
    if (expanded) {
      rowdata.push(record.sortId.toString(16));
      const iaArr = this.getId(record.portfolioCode, record.children); // 展开行下层子元素id
      const seeRow = seeRowId.concat(iaArr);
      this.setState(
        {
          expandRow: rowdata, // 当前展开行
          seeRowId: seeRow, // 当前可视行id数组
        },
        () => {
          // this.goToInfo();
        },
      );
    } else {
      const openRow = rowdata.filter((item) => item !== record.sortId);
      this.data = []; // 清空公共变量
      const visiable = this.setVisiable(record.children, openRow); // 找到根节点下子元素的id
      const datas = this.setVisiable2(openRow, visiable); // 去除重复部分
      this.data1 = []; // 清空公共变量
      const iaArr = this.getId2(record.id, record.children); // 闭合行的所有元素id
      const showId = this.setVisiable3(seeRowId, iaArr); // 整理发给后台的数据
      this.setState(
        {
          expandRow: datas, // 当前展开行
          seeRowId: showId, // 当前可视行id数组
        },
        () => {
          // this.goToInfo();
        },
      );
    }
  };

  // 找出根节点下子节点的id
  setVisiable = (record, openRow) => {
    const arr = record;
    if (arr && arr.length) {
      arr.map((item) => {
        if (item.children) {
          openRow.map((items) => {
            if (item.sortId == items) {
              this.data.push(item.sortId);
            }
          });
        }
        item.product ? null : this.setVisiable(item.children, openRow);
      });
    }
    return this.data;
  };

  // 去除数组重复部分
  setVisiable2 = (arr1, arr2) => {
    const data = arr1.filter((item) => !arr2.some((e) => e === item));
    return data;
  };

  setVisiable3 = (arr1, arr2) => {
    const data = arr1.filter((item) => !arr2.some((e) => e.id === item.id));
    return data;
  };

  // 取出展开行的下层子节点id
  getId = (id, arr) => {
    const data = [];
    if (arr && arr.length) {
      arr.map((item) => {
        if (item.children) {
          data.push({ id: item.portfolioCode, isChildren: item.product, pid: id, sortId: item.sortId, groupId: item.groupId });
        }
      });
    }
    return data;
  };

  // 获取该行下所有子元素id
  getId2 = (id, arr) => {
    if (arr && arr.length) {
      arr.map((item) => {
        this.data1.push({ id: item.portfolioCode, pid: id, isChildren: item.product, sortId: item.sortId, groupId: item.groupId });
        !item.product ? this.getId2(item.portfolioCode, item.children) : null;
      });
    }
    return this.data1;
  };

  render() {
    const { targetArr, expandRow } = this.state;
    const { isgroup, isSimulate } = this.props;
    return (
      <div>
        {/* 指标 */}
        <div className={style.target}>
          {targetArr.map((item, index) => {
            if (item.value != 0 && !item.value) return;
            let value;
            if (item.value != '--') {
              if (item.key == 'realtimeValue' || item.key == 'newValue') {
                value = Number(Math.abs(item.value)).toFixed(4);
              } else {
                value = Number(Math.abs(item.value)) * 100;
                value = `${value.toFixed(2)}%`;
              }
            }
            return (
              <div className={style.targetItem} key={index}>
                <span className={style.targetTitle}>{item.title}</span>
                <div className={style.targetContent}>
                  {item.value == '--' || item.value == 0 || item.key == 'realtimeValue' || item.key == 'newValue' ? (
                    <div>
                      <span style={{ marginRight: '4px' }}>{item.value}</span>
                    </div>
                  ) : item.value > 0 ? (
                    <div className={style.upCompare}>
                      <span style={{ marginRight: '4px' }}>{value}</span>
                      <ArrowUpOutlined />
                    </div>
                  ) : item.value < 0 ? (
                    <div className={style.downCompare}>
                      <span style={{ marginRight: '4px' }}>{value}</span>
                      <ArrowDownOutlined />
                    </div>
                  ) : (
                    ''
                  )}
                </div>
                <img src={changePng} className={style.targetImg} />
                <div className={style.targetLine}></div>
              </div>
            );
          })}
        </div>
        <div style={{ marginTop: '10px' }}>
          <InfoTipsC Left='监控主表内的成本价、最新价、涨跌幅、总市值、当日盈亏和总盈亏都以交易币种展示，权重转换为人民币后计算。' style={{ paddingLeft: '20px', width: '100%' }} />
        </div>
        {/* 表格 */}
        {this.tableRender()}
        {!isgroup && isSimulate != '1' ? (
          <div className={style.fixedBox}>
            {this.fixedTable()}
            {this.fixedBtn()}
          </div>
        ) : (
          ''
        )}
      </div>
    );
  }
}
export default connect(({ portfolioTrackingsM, loading }) => ({ portfolioTrackingsM, loading }))(TargetTable);
